<template>
  <PageWrapper>
    <TableFilterForm :loading="dictOptLoading" :formState="formState" @search="onSearch">
      <FormItem label="时间" name="date" >
        <RangePicker v-model:value="formState.date"
        :show-time="{ format: 'HH' }"
        format="YYYY-MM-DD HH"
        :placeholder="['开始时间', '结束时间']"
        />
      </FormItem>
      <FormItem label="房间名称" name="roomName" >
        <Input placeholder="请输入房间名称" v-model:value="formState.roomName" />
      </FormItem>
      <FormItem label="房间类型" name="roomType" >
        <Select placeholder="请选择房间类型" v-model:value="formState.roomType" class="min-w-[80px]" >
          <SelectOption v-for="item in roomTypeOpts" :key="item.value" :value="item.value">{{ item.label }}</SelectOption>
        </Select>
      </FormItem>
    </TableFilterForm>

    <BasicTable @register="register" >
      <template #toolbar>
        <Button>导出</Button>
      </template>
    </BasicTable>
  </PageWrapper>
</template>

<script lang="ts" setup >
import { reactive } from 'vue'
import { useRequest } from '@vben/hooks'
import { Button, FormItem, RangePicker, Input, Select, SelectOption } from 'ant-design-vue'
import { PageWrapper } from '@/components/Page'
import { BasicTable, useTable, TableFilterForm } from '@/components/Table'
import { getRoomUseRecords } from '@/api/roomUseRecord'
import { tableColumns } from './tableOption';
import { getDictOpts } from '@/api/dictionary'

const { data: roomTypeOpts, loading: dictOptLoading } = useRequest(() => getDictOpts('FJLX'))

const { loading, data: tableData, runAsync } = useRequest(getRoomUseRecords);

const [register] = useTable({
  columns: tableColumns,
  dataSource: tableData,
  loading
});

const formState = reactive({
  date: undefined,
  roomName: '',
  roomType: ''
})


async function onSearch() {
  const { roomName, roomType, date } = formState;
  runAsync({
    roomName,
    roomType,
    startTime: date?.[0],
    endTime: date?.[1]
  })
}

</script>
